@use "sass:string";
$maxWidth: 540px;
@mixin MaxWidth {
    @media screen and (min-width: 540px) {
        @content;
    }
}

@mixin MaxWidth-center($p: 0px) {
    @media screen and (min-width: 540px) {
        max-width: $maxWidth - $p;
        // left: 50% !important;
        // transform: translateX(-50%);
        margin: auto;
    }
}
@mixin iphoneX {
    @media screen and (min-aspect-ratio: 812 / 375) {
        // @media screen and (max-aspect-ratio: 375 / 812) {
        @content;
    }
}
@mixin iPad {
    @media screen and (max-aspect-ratio: 1024 / 768) {
        // @media screen and (max-aspect-ratio: 768 / 1024) {
        @content;
    }
}

$m-start: 2px;
$m-offset: 2px;
$m-num: 10;
$dirction: (
    "t": "top",
    "l": "left",
    "b": "bottom",
    "r": "right",
    x: "",
    y: "",
    a: "",
);

@each $k, $v in $dirction {
    @for $i from 0 through $m-num {
        $r: #{$m-start + $i * $m-offset};
        $nr: #{-1 * ($m-start + $i * $m-offset)};
        $k_v: string.slice($r + "", 0, -3);
        $selector1: ".margin-#{$k}-#{$k_v}";
        $selector2: " .padding-#{$k}-#{$k_v}";
        $selector3: ".margin-#{$k}-n#{$k_v}";
        $selector4: " .padding-#{$k}-n#{$k_v}";
        @if $k == "x" {
            #{$selector1} {
                margin-left: $r;
                margin-right: $r;
            }
            #{$selector2} {
                padding-left: $r;
                padding-right: $r;
            }
            #{$selector3} {
                margin-left: $nr;
                margin-right: $nr;
            }
            #{$selector4} {
                padding-left: $nr;
                padding-right: $nr;
            }
        } @else if $k == "y" {
            #{$selector1} {
                margin-top: $r;
                margin-bottom: $r;
            }
            #{$selector2} {
                padding-top: $r;
                padding-bottom: $r;
            }
            #{$selector3} {
                margin-top: $nr;
                margin-bottom: $nr;
            }
            #{$selector4} {
                padding-top: $nr;
                padding-bottom: $nr;
            }
        } @else if $k == "a" {
            #{$selector1} {
                margin: $r;
            }
            #{$selector2} {
                padding: $r;
            }
            #{$selector3} {
                margin: $nr;
            }
            #{$selector4} {
                padding: $nr;
            }
        } @else {
            #{$selector1} {
                margin-#{$v}: $r;
            }
            #{$selector2} {
                padding-#{$v}: $r;
            }
            #{$selector3} {
                margin-#{$v}: $nr;
            }
            #{$selector4} {
                padding-#{$v}: $nr;
            }
        }
    }
}

$radius-start: 2px;
$radius-offset: 2px;
$radius-num: 10;
$dirction2: (
    "t": "top-left top-right",
    "r": "top-right bottom-right",
    "b": "bottom-left bottom-right",
    "l": "top-left bottom-left",
    "tl": "top-left",
    "tr": "top-right",
    "bl": "bottom-left",
    "br": "bottom-right",
    "a": "",
);

@each $k, $v in $dirction2 {
    @for $i from 0 through $radius-num {
        $r: #{$radius-start + $i * $radius-offset};
        $k_v: string.slice($r + "", 0, -3);
        $selector: ".radius-#{$k}-#{$k_v}";
        $v_list: string.split($v, " ");
        @if $k != "a" {
            #{ $selector} {
                // @debug "#{border-#{$v}-radius},#{$r}";
                @each $v_v in $v_list {
                    @debug $v_v;
                    border-#{$v_v}-radius: $r;
                }
            }
        } @else {
            #{ $selector} {
                // @debug "#{border-#{$v}-radius},#{$r}";
                border-radius: $r;
            }
        }
    }
}
